<template>
  <view class="stress-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-back" @tap="goBack">
        <text class="iconfont icon-back">←</text>
      </view>
      <view class="navbar-content">
        <text class="navbar-title">压力测评</text>
        <text class="navbar-subtitle">PSS-10 压力感知量表</text>
      </view>
    </view>

    <!-- 测试说明 -->
    <view class="test-intro" v-if="!testStarted">
      <view class="intro-card">
        <view class="intro-icon">
          <text class="emoji">😤</text>
        </view>
        <view class="intro-content">
          <text class="intro-title">压力感知测评</text>
          <text class="intro-desc">本测试基于PSS-10压力感知量表，评估您在过去一个月内对生活压力的感知程度。请根据实际感受如实回答。</text>
          <view class="intro-info">
            <text class="info-item">📝 共10题</text>
            <text class="info-item">⏱️ 约5-8分钟</text>
            <text class="info-item">🔒 数据本地保存</text>
          </view>
        </view>
      </view>
      <button class="start-btn" @tap="startTest">开始测试</button>
    </view>

    <!-- 测试题目 -->
    <view class="test-content" v-if="testStarted && !testCompleted">
      <view class="progress-bar">
        <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
      </view>
      <view class="question-info">
        <text class="question-number">{{ currentQuestion + 1 }} / {{ questions.length }}</text>
      </view>
      
      <view class="question-card">
        <text class="question-text">在过去的一个月中，{{ questions[currentQuestion].text }}</text>
        <view class="options-list">
          <view 
            class="option-item" 
            v-for="(option, index) in options" 
            :key="index"
            :class="{ selected: selectedAnswer === index }"
            @tap="selectAnswer(index)"
          >
            <view class="option-radio">
              <view class="radio-dot" v-if="selectedAnswer === index"></view>
            </view>
            <text class="option-text">{{ option.text }}</text>
          </view>
        </view>
      </view>

      <view class="test-actions">
        <button class="prev-btn" @tap="prevQuestion" :disabled="currentQuestion === 0">上一题</button>
        <button class="next-btn" @tap="nextQuestion" :disabled="selectedAnswer === null">
          {{ currentQuestion === questions.length - 1 ? '完成测试' : '下一题' }}
        </button>
      </view>
    </view>

    <!-- 测试结果 -->
    <view class="test-result" v-if="testCompleted">
      <view class="result-card">
        <view class="result-score">
          <text class="score-number">{{ totalScore }}</text>
          <text class="score-label">分</text>
        </view>
        <view class="result-level" :class="resultLevel.class">
          <text class="level-text">{{ resultLevel.text }}</text>
        </view>
        <view class="result-desc">
          <text class="desc-text">{{ resultLevel.description }}</text>
        </view>
      </view>

      <view class="suggestions">
        <view class="suggestion-title">压力管理建议</view>
        <view class="suggestion-list">
          <text class="suggestion-item" v-for="suggestion in resultLevel.suggestions" :key="suggestion">
            • {{ suggestion }}
          </text>
        </view>
      </view>

      <view class="result-actions">
        <button class="save-btn" @tap="saveResult">保存结果</button>
        <button class="retry-btn" @tap="retakeTest">重新测试</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      testStarted: false,
      testCompleted: false,
      currentQuestion: 0,
      selectedAnswer: null,
      answers: [],
      totalScore: 0,
      questions: [
        { text: '您有多经常因为发生了意想不到的事情而感到心烦？', reverse: false },
        { text: '您有多经常感到无法控制生活中重要的事情？', reverse: false },
        { text: '您有多经常感到紧张和有压力？', reverse: false },
        { text: '您有多经常成功地处理恼人的生活麻烦？', reverse: true },
        { text: '您有多经常感到您在有效地处理生活中发生的重要变化？', reverse: true },
        { text: '您有多经常对处理个人问题的能力感到自信？', reverse: true },
        { text: '您有多经常感到事情都在按您的意愿进行？', reverse: true },
        { text: '您有多经常发现您无法处理所有您必须要做的事情？', reverse: false },
        { text: '您有多经常能够控制生活中的烦恼？', reverse: true },
        { text: '您有多经常感到您能够掌控一切？', reverse: true }
      ],
      options: [
        { text: '从不', value: 0 },
        { text: '几乎从不', value: 1 },
        { text: '有时', value: 2 },
        { text: '相当经常', value: 3 },
        { text: '非常经常', value: 4 }
      ]
    }
  },
  
  computed: {
    progressPercent() {
      return ((this.currentQuestion + 1) / this.questions.length) * 100
    },
    
    resultLevel() {
      if (this.totalScore <= 13) {
        return {
          text: '低压力',
          class: 'level-low',
          description: '您的压力水平较低，能够较好地应对生活中的挑战。',
          suggestions: [
            '保持现有的良好状态',
            '继续使用有效的应对策略',
            '适当挑战自己，促进成长',
            '帮助他人缓解压力'
          ]
        }
      } else if (this.totalScore <= 26) {
        return {
          text: '中等压力',
          class: 'level-moderate',
          description: '您的压力水平处于中等程度，需要关注并采取一些调节措施。',
          suggestions: [
            '学习时间管理技巧',
            '建立规律的运动习惯',
            '培养兴趣爱好放松身心',
            '与朋友家人保持良好沟通',
            '尝试冥想或深呼吸练习'
          ]
        }
      } else {
        return {
          text: '高压力',
          class: 'level-high',
          description: '您的压力水平较高，建议积极寻求帮助并采取有效的压力管理策略。',
          suggestions: [
            '考虑寻求专业心理咨询',
            '学习压力管理技巧',
            '调整工作和生活节奏',
            '建立强有力的社会支持网络',
            '必要时考虑医疗干预'
          ]
        }
      }
    }
  },
  
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    startTest() {
      this.testStarted = true
      this.answers = new Array(this.questions.length).fill(null)
    },
    
    selectAnswer(index) {
      this.selectedAnswer = index
    },
    
    nextQuestion() {
      if (this.selectedAnswer === null) return
      
      this.answers[this.currentQuestion] = this.selectedAnswer
      
      if (this.currentQuestion === this.questions.length - 1) {
        this.completeTest()
      } else {
        this.currentQuestion++
        this.selectedAnswer = this.answers[this.currentQuestion]
      }
    },
    
    prevQuestion() {
      if (this.currentQuestion > 0) {
        this.currentQuestion--
        this.selectedAnswer = this.answers[this.currentQuestion]
      }
    },
    
    completeTest() {
      // 计算总分，考虑反向计分题目
      this.totalScore = this.answers.reduce((sum, answer, index) => {
        const question = this.questions[index]
        const score = this.options[answer].value
        // 反向计分题目需要用4减去原始分数
        return sum + (question.reverse ? 4 - score : score)
      }, 0)
      
      this.testCompleted = true
    },
    
    saveResult() {
      const result = {
        id: Date.now(),
        type: 'stress',
        score: this.totalScore,
        level: this.resultLevel.text,
        date: new Date().toISOString(),
        answers: this.answers
      }
      
      try {
        let history = uni.getStorageSync('test_history') || []
        history.unshift(result)
        uni.setStorageSync('test_history', history)
        
        uni.showToast({
          title: '结果已保存',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (e) {
        uni.showToast({
          title: '保存失败',
          icon: 'error'
        })
      }
    },
    
    retakeTest() {
      this.testStarted = false
      this.testCompleted = false
      this.currentQuestion = 0
      this.selectedAnswer = null
      this.answers = []
      this.totalScore = 0
    }
  }
}
</script>

<style scoped>
.stress-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* 导航栏 */
.custom-navbar {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  padding: 88rpx 40rpx 40rpx;
  color: white;
  display: flex;
  align-items: center;
}

.navbar-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.navbar-back .iconfont {
  font-size: 36rpx;
}

.navbar-content {
  flex: 1;
  text-align: center;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 5rpx;
}

.navbar-subtitle {
  font-size: 24rpx;
  opacity: 0.9;
}

/* 测试说明 */
.test-intro {
  padding: 40rpx 30rpx;
}

.intro-card {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  text-align: center;
}

.intro-icon .emoji {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

.intro-title {
  font-size: 36rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 15rpx;
}

.intro-desc {
  font-size: 28rpx;
  color: var(--text-secondary);
  line-height: 1.6;
  display: block;
  margin-bottom: 30rpx;
}

.intro-info {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  flex-wrap: wrap;
}

.info-item {
  font-size: 24rpx;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 10rpx 20rpx;
  border-radius: 12rpx;
}

.start-btn {
  width: 100%;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  color: white;
  border: none;
  border-radius: 16rpx;
  padding: 32rpx;
  font-size: 32rpx;
  font-weight: 600;
}

/* 测试内容 */
.test-content {
  padding: 40rpx 30rpx;
}

.progress-bar {
  height: 8rpx;
  background: var(--border-color);
  border-radius: 4rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  transition: width 0.3s ease;
}

.question-info {
  text-align: center;
  margin-bottom: 30rpx;
}

.question-number {
  font-size: 28rpx;
  color: var(--text-tertiary);
}

.question-card {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.question-text {
  font-size: 32rpx;
  color: var(--text-primary);
  line-height: 1.5;
  display: block;
  margin-bottom: 30rpx;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.option-item.selected {
  background: #fff3e0;
}

.option-radio {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid var(--border-color);
  border-radius: 50%;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-item.selected .option-radio {
  border-color: #ff6b6b;
}

.radio-dot {
  width: 20rpx;
  height: 20rpx;
  background: #ff6b6b;
  border-radius: 50%;
}

.option-text {
  font-size: 28rpx;
  color: var(--text-primary);
}

.test-actions {
  display: flex;
  gap: 20rpx;
}

.prev-btn, .next-btn {
  flex: 1;
  padding: 24rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;
}

.prev-btn {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.prev-btn:disabled {
  opacity: 0.5;
}

.next-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  color: white;
}

.next-btn:disabled {
  background: var(--border-color);
  color: var(--text-tertiary);
}

/* 测试结果 */
.test-result {
  padding: 40rpx 30rpx;
}

.result-card {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  text-align: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.result-score {
  margin-bottom: 20rpx;
}

.score-number {
  font-size: 80rpx;
  font-weight: 600;
  color: #ff6b6b;
}

.score-label {
  font-size: 32rpx;
  color: var(--text-secondary);
  margin-left: 10rpx;
}

.result-level {
  padding: 15rpx 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  display: inline-block;
}

.level-low { background: #d4edda; color: #155724; }
.level-moderate { background: #fff3cd; color: #856404; }
.level-high { background: #f8d7da; color: #721c24; }

.level-text {
  font-size: 28rpx;
  font-weight: 600;
}

.desc-text {
  font-size: 28rpx;
  color: var(--text-secondary);
  line-height: 1.5;
}

.suggestions {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.suggestion-title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20rpx;
}

.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.suggestion-item {
  font-size: 28rpx;
  color: var(--text-secondary);
  line-height: 1.4;
}

.result-actions {
  display: flex;
  gap: 20rpx;
}

.save-btn, .retry-btn {
  flex: 1;
  padding: 24rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;
}

.save-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
  color: white;
}

.retry-btn {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
</style>